<template>
  <div>
    <basic-container>
      <div class="mod-config">
        <div @click="muen('设备监控')" style="width: 25%;height: 195px;border: 1px solid;position: relative;float:left"><img
          src="../img/u33.png" width="50%" height="170px"><span
          style="position: absolute;font-size: 30px;margin-top: 80px;">设备监控</span></div>
        <div @click="muen('门禁管理')"
             style="width: 25%;height: 195px;border: 1px solid;position: relative;float:left">
          <img src="../img/u35.png" width="50%" height="170px"><span
          style="position: absolute;font-size: 30px;margin-top: 80px;">门禁管理</span></div>
        <div @click="muen('道闸管理')"
             style="width: 25%;height: 195px;border: 1px solid;position: relative;float:left">
          <img src="../img/u37.png" width="50%" height="170px"><span
          style="position: absolute;font-size: 30px;margin-top: 80px;">道闸管理</span></div>
        <div @click="muen('人脸管理')"
             style="width: 25%;height: 195px;border: 1px solid;position: relative;float:left">
          <img src="../img/u39.png" width="50%" height="170px">
          <span
          style="position: absolute;font-size: 30px;margin-top: 80px;">人脸管理</span>
        </div>
          <div style="position: relative;margin-inside: 10">
            <br><br><br><br><br><br><br><br><br><br><br><br>
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item label="编号：">
              <el-input v-model="searchForm.deviceCode" placeholder="编号" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建时间：">
              <el-date-picker v-model="dateList" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                              start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button v-if="permissions.hik_hikcdcbuildcontrol_add" icon="el-icon-plus" type="primary"
                         @click="addOrUpdateHandle()">新增
              </el-button>
              <el-button v-if="permissions.hik_hikcdcbuildcontrol_export" icon="el-icon-download" type="primary" plain
                         @click="exportExcel()">导出
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDataList()" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
          <div class="avue-crud">
            <el-table
              :data="dataList"
              border
              v-loading="dataListLoading">
              <el-table-column
                prop="id"
                header-align="center"
                align="center"
                label="id">
              </el-table-column>
              <el-table-column
                prop="deviceCode"
                header-align="center"
                align="center"
                label="设备编号 ">
              </el-table-column>
              <el-table-column
                prop="deviceStatus"
                header-align="center"
                align="center"
                label="运行状态">
              </el-table-column>
              <el-table-column
                prop="deviceAnto"
                header-align="center"
                align="center"
                label="自动手动">
              </el-table-column>
              <el-table-column
                prop="controllModel"
                header-align="center"
                align="center"
                label="控制模式">
              </el-table-column>
              <el-table-column
                prop="supplyTemp"
                header-align="center"
                align="center"
                label="送风温度（实测值）">
              </el-table-column>
              <el-table-column
                prop="waterSwitch"
                header-align="center"
                align="center"
                label="水阀开关">
              </el-table-column>
              <el-table-column
                prop="windSwitch"
                header-align="center"
                align="center"
                label="风阀开关">
              </el-table-column>
              <el-table-column
                prop="createTime"
                header-align="center"
                align="center"
                label="创建时间">
              </el-table-column>
              <el-table-column
                prop="updateTime"
                header-align="center"
                align="center"
                label="更新时间">
              </el-table-column>
              <el-table-column
                prop="updateBy"
                header-align="center"
                align="center"
                label="操作人">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                label="操作">
                <template slot-scope="scope">
                  <el-button v-if="permissions.hik_hikcdcbuildcontrol_edit" type="text" size="small" icon="el-icon-edit"
                             @click="addOrUpdateHandle(scope.row.id)">修改
                  </el-button>
                  <el-button v-if="permissions.hik_hikcdcbuildcontrol_del" type="text" size="small"
                             icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="avue-crud__pagination">
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              background
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
          <!-- 弹窗, 新增 / 修改 -->
          <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
  import {fetchList1} from '@/api/hik/wel'
  import {fetchList, delObj} from '@/api/hik/hikcdcbuildcontrol'
  import {mapGetters} from 'vuex'
  import TableForm from "@/views/hik/hikcdcbuildcontrol/hikcdcbuildcontrol-form";

  export default {
    name: 'Wel',
    data() {
      return {
        activeNames: ['1', '2', '3', '4'],
        DATA: [],
        text: '',
        actor: '',
        count: 0,
        isText: false,
        carLineTotal: '',// 车道总数
        carParkTotal: '',// 车库总数
        dayInGate: '', //当天入闸数
        dayOnLine: '', //当日在线数
        dayReadCard: '', //当日读卡数
        dayWatchCount: '',// 当日巡更数
        dayWatchPeople: '',// 当日巡更人员
        noUseParkCount: '',// 剩余车位数
        useParkCount: '',// 已占车位数
        localTime: '',// 当前时间
        dataForm: {
          key: ''
        },
        searchForm: {},
        dataList: [],
        dateList:[],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    computed: {
      ...mapGetters(['website', 'permissions'])
    },
    components: {
      TableForm
    },
    mounted() {
      // this.getDataList1()
      this.getDataList()
    },
    methods: {
      muen(date) {
        if (date == "设备监控") {
          this.$router.push('/hik/equipment/index');

        }
        ;
        if (date == "门禁管理") {
          this.$router.push('/hik/door/point/index');
        }
        ;
        if (date == "道闸管理") {
          this.$router.push('/hik/car/barrier/index');
        }
        ;
        if (date == "人脸管理") {
          this.$router.push('/hik/face/face/index');
        }
        ;
        console.log(date);
      },
      getDataList1() {
        this.dataListLoading = true
        fetchList1(Object.assign({
            current: this.pageIndex,
            size: this.pageSize
          }, this.searchForm
        )).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
          console.log(response.data.data.carParkTotal);
          this.carLineTotal = response.data.data.carLineTotal// 车道总数
          this.carParkTotal = response.data.data.carParkTotal// 车库总数
          this.dayInGate = response.data.data.dayInGate //当天入闸数
          this.dayOnLine = response.data.data.dayOnLine //当日在线数
          this.dayReadCard = response.data.data.dayReadCard //当日读卡数
          this.dayWatchCount = response.data.data.dayWatchCount// 当日巡更数
          this.dayWatchPeople = response.data.data.dayWatchPeople// 当日巡更人员
          this.noUseParkCount = response.data.data.noUseParkCount// 剩余车位数
          this.useParkCount = response.data.data.useParkCount// 已占车位数
          this.localTime = response.data.data.localTime// 当前时间
        })
        this.dataListLoading = false
      },

      getData() {
        if (this.count < this.DATA.length - 1) {
          this.count++
        } else {
          this.count = 0
        }
        this.isText = true
        this.actor = this.DATA[this.count]
      },


      setData() {
        let num = 0
        let count = 0
        let active = false
        const timeoutstart = 5000
        const timeoutend = 1000
        const timespeed = 10
        setInterval(() => {
          if (this.isText) {
            if (count == this.actor.length) {
              active = true
            } else {
              active = false
            }
            if (active) {
              num--
              this.text = this.actor.substr(0, num)
              if (num == 0) {
                this.isText = false
                setTimeout(() => {
                  count = 0
                  this.getData()
                }, timeoutend)
              }
            } else {
              num++
              this.text = this.actor.substr(0, num)
              if (num == this.actor.length) {
                this.isText = false
                setTimeout(() => {
                  this.isText = true
                  count = this.actor.length
                }, timeoutstart)
              }
            }
          }
        }, timespeed)
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        if (this.dateList != null && this.dateList.length > 1) {
          this.searchForm.startTime = this.dateList[0];
          this.searchForm.endTime = this.dateList[1];
        } else {
          this.searchForm.startTime = ''
          this.searchForm.endTime = ''
        }
        fetchList(Object.assign({
          current: this.pageIndex,
          size: this.pageSize
        },this.searchForm)).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        this.$confirm('是否确认删除ID为' + id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delObj(id)
        }).then(data => {
          this.$message.success('删除成功')
          this.getDataList()
        })
      },
      //  导出excel
      exportExcel() {
        this.downBlobFile('/hik/hikcdcbuildcontrol/export', this.searchForm, 'hikcdcbuildcontrol.xlsx')
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .el-collapse-item__header {
    display: block !important;
  }

  .wel-contailer {
    position: relative;
  }

  .banner-text {
    position: relative;
    padding: 0 20px;
    font-size: 20px;
    text-align: center;
    color: #333;
  }

  .banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    display: none;
  }

  .actor {
    height: 250px;
    overflow: hidden;
    font-size: 18px;
    color: #333;
  }

  .actor:after {
    content: '';
    width: 3px;
    height: 25px;
    vertical-align: -5px;
    margin-left: 5px;
    background-color: #333;
    display: inline-block;
    animation: blink 0.4s infinite alternate;
  }

  .typeing:after {
    animation: none;
  }

  @keyframes blink {
    to {
      opacity: 0;
    }
  }
</style>
